<template>
    <div>
        <swiper
            :indicator-dots="true"
            indicator-active-color="#f94700"
            :autoplay="true"
            duration="1000"
            :circular="true"
            class="swiper"
        >
            <div :key="imgIndex" v-for="(top,imgIndex) in chunkTop">
                <swiper-item>
                    <img @click="bookDetail(item)" :key="item.id" mode="aspectFit" v-for="item in top" :src="item.image" class="slide-image"/>
                </swiper-item>
            </div>
        </swiper>
    </div>
</template>

<script>
export default {
    props:['top'],
    mounted() {
    },
    methods: {
        bookDetail(item) {
            wx.navigateTo({
                url:`/pages/detail/main?id=${item.id}`
            })
        }
    },
    computed: {
        chunkTop() {
            let res = [this.top.slice(0,3),this.top.slice(3,6),this.top.slice(6)]
            return res
        }
    }
}
</script>

<style lang="stylus" scoped>
    .swiper
        margin-top 5px
        height 250rpx
        .slide-image
            width 33%
            height 250rpx
</style>
